<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">  
  <title>微语Linked</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#722ED1',
            neutral: '#F2F3F5',
            'neutral-dark': '#4E5969',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .bg-gradient-custom {
        background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);
      }
      .chat-bubble-left {
        border-radius: 18px 18px 18px 0;
      }
      .chat-bubble-right {
        border-radius: 18px 18px 0 18px;
      }
      .password-strength-bar {
        height: 4px;
        transition: width 0.3s ease;
      }
    }
  </style>
  
  <style>
    /* 全局样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      overflow-x: hidden;
    }
    
    /* 动画效果 */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    
    .animate-pulse-slow {
      animation: pulse 3s ease-in-out infinite;
    }
    
    .input-focus-effect {
      position: relative;
    }
    
    .input-focus-effect::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: #165DFF;
      transition: width 0.3s ease;
    }
    
    .input-focus-effect:focus-within::after {
      width: 100%;
    }
    
    /* 背景装饰 */
    .bg-decoration {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.2;
      z-index: 0;
    }
    
    /* 左侧装饰图形 */
    .decorative-shape {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      animation: float 8s ease-in-out infinite;
    }
    
    /* 聊天动画 */
    .chat-appear {
      animation: appear 0.5s ease-out forwards;
      opacity: 0;
      transform: translateY(10px);
    }
    
    @keyframes appear {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>

<body class="bg-gray-50 min-h-screen">
  <div class="relative min-h-screen flex flex-col md:flex-row">
    <!-- 左侧品牌区域 - 仅在中等及以上屏幕显示 -->
    <div class="hidden md:flex md:w-1/2 bg-gradient-custom relative overflow-hidden">
      <!-- 装饰图形 -->
      <div class="decorative-shape w-72 h-72 top-10 left-10 animate-float"></div>
      <div class="decorative-shape w-96 h-96 bottom-20 right-10 animate-float" style="animation-delay: 2s;"></div>
      <div class="decorative-shape w-40 h-40 top-1/3 right-1/4 animate-float" style="animation-delay: 4s;"></div>
      
      <!-- 品牌内容 -->
      <div class="relative z-10 w-full flex flex-col justify-center items-center px-8 md:px-16">
        <div class="w-20 h-20 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-10 shadow-lg animate-float">
          <i class="fa fa-comments text-white text-3xl"></i>
        </div>
        
        <h1 class="text-[clamp(2.5rem,6vw,4.5rem)] font-bold text-white mb-6 text-center text-shadow leading-tight">
          微语<span class="text-secondary">Linked</span>
        </h1>
        
        <p class="text-white/90 text-lg md:text-xl max-w-xl mb-12 text-center">
          加入我们，与朋友、家人和同事保持紧密联系，分享生活点滴
        </p>
        
        <!-- 社交连接预览 -->
        <div class="w-full max-w-md bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-xl mb-12 transform transition-custom hover:scale-[1.02]">
          <h3 class="text-white text-xl font-medium mb-6 text-center">加入活跃社群</h3>
          
          <div class="space-y-4">
            <!-- 社群示例1 -->
            <div class="flex items-center p-3 bg-white/5 rounded-xl transition-custom hover:bg-white/10">
              <div class="w-12 h-12 rounded-full bg-blue-400/30 flex items-center justify-center">
                <i class="fa fa-code text-white text-xl"></i>
              </div>
              <div class="ml-4 flex-grow">
                <h4 class="text-white font-medium">开发者社区</h4>
              </div>
              <button class="text-secondary hover:text-white transition-custom">
                <i class="fa fa-plus-circle"></i>
              </button>
            </div>
            
            <!-- 社群示例2 -->
            <div class="flex items-center p-3 bg-white/5 rounded-xl transition-custom hover:bg-white/10">
              <div class="w-12 h-12 rounded-full bg-green-400/30 flex items-center justify-center">
                <i class="fa fa-coffee text-white text-xl"></i>
              </div>
              <div class="ml-4 flex-grow">
                <h4 class="text-white font-medium">设计爱好者</h4>
              </div>
              <button class="text-secondary hover:text-white transition-custom">
                <i class="fa fa-plus-circle"></i>
              </button>
            </div>
            
            <!-- 社群示例3 -->
            <div class="flex items-center p-3 bg-white/5 rounded-xl transition-custom hover:bg-white/10">
              <div class="w-12 h-12 rounded-full bg-purple-400/30 flex items-center justify-center">
                <i class="fa fa-gamepad text-white text-xl"></i>
              </div>
              <div class="ml-4 flex-grow">
                <h4 class="text-white font-medium">游戏交流群</h4>
              </div>
              <button class="text-secondary hover:text-white transition-custom">
                <i class="fa fa-plus-circle"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧注册区域 -->
    <div class="w-full md:w-1/2 flex items-center justify-center p-6 md:p-12 relative">
      <!-- 背景装饰元素 -->
      <div class="bg-decoration bg-primary w-[500px] h-[500px] -top-[250px] -right-[250px]"></div>
      
      <div class="relative z-10 w-full max-w-md">
        <!-- 移动端品牌Logo和名称 -->
        <div class="text-center mb-10 md:hidden animate-float">
          <div class="w-16 h-16 bg-gradient-custom rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
            <i class="fa fa-comments text-white text-2xl"></i>
          </div>
          <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 mb-2 text-shadow">
            微语<span class="text-primary">Linked</span>
          </h1>
          <p class="text-neutral-dark text-lg">连接心灵，畅所欲言的即时聊天平台</p>
        </div>
        
        <!-- 注册卡片 -->
        <div class="w-full bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl transform hover:-translate-y-1">
          <!-- 卡片顶部 -->
          <div class="bg-gradient-custom p-6 text-center">
            <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-white">创建账号</h2>
            <p class="text-white/80 mt-1">加入微语Linked，开始您的聊天之旅</p>
          </div>
          
          <!-- 注册表单 -->
          <div class="p-6 md:p-8">
            <div class="space-y-5">
              <!-- 用户名输入 -->
              <div class="input-focus-effect">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                    <i class="fa fa-user"></i>
                  </span>
                  <input type="text" id="username" 
                    class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-0 outline-none transition-custom"
                    placeholder="请设置用户名">
                </div>
                <p class="text-xs text-gray-500 mt-1">用户名将作为您的显示名称，不可更改</p>
              </div>
              
              <!-- 密码输入 -->
              <div class="input-focus-effect">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                    <i class="fa fa-lock"></i>
                  </span>
                  <input type="password" id="password" 
                    class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-0 outline-none transition-custom"
                    placeholder="请设置密码">
                  <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-custom">
                    <i class="fa fa-eye-slash"></i>
                  </button>
                </div>
                
                <!-- 密码强度指示器 -->
                <div class="mt-2">
                  <div class="flex space-x-1 mb-1">
                    <div id="strength-1" class="password-strength-bar w-1/4 bg-gray-200 rounded-full"></div>
                    <div id="strength-2" class="password-strength-bar w-0 bg-gray-200 rounded-full"></div>
                    <div id="strength-3" class="password-strength-bar w-0 bg-gray-200 rounded-full"></div>
                    <div id="strength-4" class="password-strength-bar w-0 bg-gray-200 rounded-full"></div>
                  </div>
                  <p id="strength-text" class="text-xs text-gray-500">密码强度：请输入密码</p>
                </div>
                <p class="text-xs text-gray-500 mt-1">建议密码长度超过8位，且包含字母和数字</p>
              </div>

              
              <!-- 注册按钮 -->
              <button type="button" 
                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50 mt-2"
                onclick="register()">
                注册账号
              </button>
            </div>
            
            <!-- 登录链接 -->
            <div class="mt-8 text-center">
              <p class="text-gray-600">
                已有账号? <a href="login.html" class="font-medium text-primary hover:text-primary/80 transition-custom">立即登录</a>
              </p>
            </div>
          </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="mt-12 text-center text-gray-500 text-sm">
          <p>© 2025 微语Linked. 保留所有权利.</p>
        </footer>
      </div>
    </div>
  </div>

  <script>
    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const password = document.getElementById('password');
    
    togglePassword.addEventListener('click', function() {
      // 切换类型
      const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
      password.setAttribute('type', type);
      
      // 切换图标
      this.querySelector('i').classList.toggle('fa-eye');
      this.querySelector('i').classList.toggle('fa-eye-slash');
    });
    
    // 密码强度检测（纯前端展示）
    password.addEventListener('input', function() {
      const passwordValue = this.value;
      const strength1 = document.getElementById('strength-1');
      const strength2 = document.getElementById('strength-2');
      const strength3 = document.getElementById('strength-3');
      const strength4 = document.getElementById('strength-4');
      const strengthText = document.getElementById('strength-text');
      
      // 重置强度指示器
      strength1.className = 'password-strength-bar w-1/4 bg-gray-200 rounded-full';
      strength2.className = 'password-strength-bar w-0 bg-gray-200 rounded-full';
      strength3.className = 'password-strength-bar w-0 bg-gray-200 rounded-full';
      strength4.className = 'password-strength-bar w-0 bg-gray-200 rounded-full';
      
      if (passwordValue.length === 0) {
        strengthText.textContent = '密码强度：请输入密码';
        strengthText.className = 'text-xs text-gray-500';
        return;
      }
      
      // 简单的密码强度检测逻辑（仅前端展示用）
      let strength = 0;
      let strengthLabel = '';
      let strengthColor = '';
      
      // 长度检测
      if (passwordValue.length >= 6) strength++;
      if (passwordValue.length >= 10) strength++;
      
      // 字符类型检测
      if (/[A-Z]/.test(passwordValue) && /[a-z]/.test(passwordValue)) strength++;
      if (/[0-9]/.test(passwordValue) && /[^A-Za-z0-9]/.test(passwordValue)) strength++;
      
      // 设置强度显示
      switch(strength) {
        case 1:
          strengthLabel = '弱';
          strengthColor = 'text-red-500 bg-red-500';
          strength1.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          break;
        case 2:
          strengthLabel = '中';
          strengthColor = 'text-yellow-500 bg-yellow-500';
          strength1.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          strength2.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          break;
        case 3:
          strengthLabel = '良好';
          strengthColor = 'text-blue-500 bg-blue-500';
          strength1.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          strength2.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          strength3.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          break;
        case 4:
          strengthLabel = '强';
          strengthColor = 'text-green-500 bg-green-500';
          strength1.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          strength2.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          strength3.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          strength4.className = `password-strength-bar w-1/4 ${strengthColor} rounded-full`;
          break;
      }
      
      strengthText.textContent = `密码强度：${strengthLabel}`;
      strengthText.className = `text-xs ${strengthColor.split(' ')[0]}`;
    });
    
    // 社群卡片动画效果（纯前端展示）
    document.addEventListener('DOMContentLoaded', function() {
      const communities = document.querySelectorAll('.flex.items-center.p-3');
      
      // 为每个社群卡片添加交错动画
      communities.forEach((community, index) => {
        community.style.opacity = '0';
        community.style.transform = 'translateY(10px)';
        community.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
          community.style.opacity = '1';
          community.style.transform = 'translateY(0)';
        }, 300 + (index * 200));
      });
      
      // 循环动画效果
      setInterval(() => {
        communities.forEach((community, index) => {
          community.style.opacity = '0';
          community.style.transform = 'translateY(10px)';
          
          setTimeout(() => {
            community.style.opacity = '1';
            community.style.transform = 'translateY(0)';
          }, 300 + (index * 200));
        });
      }, 8000);
    });

    // 注册函数
    function register() {
      console.log('注册函数被调用'); // 添加调试日志
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      console.log('用户名:', username, '密码:', password); // 检查是否获取到值
      // 发送注册请求
      $.ajax({
        url: '/user/register',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          username: username,
          password: password
        }),
        success: function(result) {
          if (result.code == 200) {
            // 注册成功，跳转到登录页面
            // 清空输入框
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            // 注册成功，显示成功信息
            alert('注册成功！');
            window.location.href = 'login.html';
          } else {
            // 注册失败，显示错误信息
            alert('注册失败：' + result.msg);
          }
        }
      });
    }
  </script>
</body>
</html>
    